import React, { Component } from "react";
import { Button, Modal, Input, Radio, message } from "antd";
import url from "@/config/url";
import axios from "@/http/http";
class Modalcom extends Component {
  state = {
    isModalVisible: false,
    userinfo: {
      username: "",
      password: "",
      email: "",
      gender: 1,
      mobile: "",
    },
  };
  render() {
    const { username, mobile, gender, password, email } = this.state.userinfo;
    return (
      <div>
        <Modal
          title={this.props.modalTitle}
          visible={this.state.isModalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>
            <Input
              placeholder="用户名"
              value={username}
              name="username"
              onChange={this.onChange}
            />
          </p>
          <p>
            <Input
              placeholder="密码"
              value={password}
              name="password"
              onChange={this.onChange}
            />
          </p>
          <p>
            <Input
              placeholder="邮箱"
              value={email}
              name="email"
              onChange={this.onChange}
            />
          </p>
          <div>
            <Radio.Group value={gender} name="gender" onChange={this.onChange}>
              <Radio value={1}>男</Radio>
              <Radio value={2}>女</Radio>
              <Radio value={3}>保密</Radio>
            </Radio.Group>
          </div>
          <p>
            <Input
              placeholder="手机号"
              value={mobile}
              name="mobile"
              onChange={this.onChange}
            />
          </p>
        </Modal>
      </div>
    );
  }
  showModal = () => {
    this.setState({
      isModalVisible: true,
    });
  };
  // 点击确认
  handleOk = () => {
    this.setState({
      isModalVisible: false,
    });
    // 发送请求
    if (this.props.modalTitle === "添加") {
      axios
        .post(url.adduser, this.state.userinfo)
        .then((res) => {
          // console.log(res)
          if (res.data.errNo == 0) {
            message.success("添加成功", 1, () => {
              this.props.getuserData();
              // 清空表单项
              this.setState({
                userinfo: {
                  username: "",
                  password: "",
                  email: "",
                  gender: 1, // 性别，合法值为1男、2女、3保密
                  mobile: "", // number
                },
              });
            });
          } else {
            message.error(res.data.errText, 1);
          }
        })
        .catch((e) => {});
    } else {
      // 编辑
      axios
        .put(url.edituser + this.props.id, this.state.userinfo)
        .then((res1) => {
          console.log("编辑", res1);
          this.props.getuserData();
          if (res1.data.errNo == 0) {
            message.success("修改成功", 1);
          }
        })
        .catch((e) => {});
    }
  };
  // 点击关闭
  handleCancel = () => {
    this.setState({
      isModalVisible: false,
    });
  };
  // onChange
  onChange = (e) => {
    const key = e.target.name;
    this.setState({
      userinfo: {
        ...this.state.userinfo,
        [key]: e.target.value,
      },
    });
  };
  // 编辑
  edituserFn = () => {
    // console.log(this.props.id)
    axios
      .get(url.edituser + this.props.id)
      .then((res) => {
        console.log(res);
        this.setState({
          userinfo: {
            username: res.data.userInfo.username,
            password: "",
            email: res.data.userInfo.email,
            gender: res.data.userInfo.gender - 0, // number类型
            mobile: res.data.userInfo.mobile,
          },
        });
      })
      .catch((e) => {});
  };
}
export default Modalcom;
